<script>
  import { goto } from '$app/navigation';

  let count = 0;
  
  function increment() {
    count += 1;
  }
  
  function openKnowledgeConfig() {
    goto('/knowledge-config');
  }
</script>

<svelte:head>
  <title>首页 - SvelteKit 演示</title>
</svelte:head>

<div class="container">
  <h1>欢迎使用 SvelteKit!</h1>
  
  <div class="nav-section">
    <button class="nav-btn" on:click={openKnowledgeConfig}>
      前往知识库配置
    </button>
  </div>
  
  <div class="counter">
    <button on:click={increment}>
      点击次数: {count}
    </button>
  </div>
  
  <div class="hello">
    <h2>Hello SvelteKit!</h2>
    <p>这是一个SvelteKit应用示例</p>
  </div>
</div>

<style>
  .container {
    text-align: center;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  h1 {
    color: #ff3e00;
    font-size: 2.5rem;
    margin-bottom: 2rem;
  }
  
  .nav-section {
    margin: 2rem 0;
  }
  
  .nav-btn {
    background-color: #10b981;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .nav-btn:hover {
    background-color: #059669;
  }
  
  .counter {
    margin: 2rem 0;
  }
  
  button {
    background-color: #ff3e00;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  button:hover {
    background-color: #d32f00;
  }
  
  .hello {
    text-align: center;
    padding: 2rem;
    background: #f0f8ff;
    border-radius: 8px;
    margin: 1rem 0;
  }
  
  .hello h2 {
    color: #ff3e00;
    margin-bottom: 1rem;
  }
  
  .hello p {
    color: #666;
  }
</style>



